<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>MVC is Fun</title>

    <style type="text/css">
      #map-canvas {
        height: 500px;
      }
	  #map-canvas2 {
        height: 500px;
      }
    </style>

    <script type="text/javascript"
        src="http://www.google.com/jsapi?autoload={'modules':[{name:'maps',version:3,other_params:''}]}"></script>
	<script type="text/javascript"
        src="http://code.jquery.com/jquery-1.9.0.js"></script>
    <script type="text/javascript">
	
	  /**
		 * A DISTANCE WIGET
		 * A distance widget that will display a circle that can be resized and will
		 * provide the radius in km.
		 *
		 * @param {google.maps.Map} map The map on which to attach the distance widget.
		 *
		 * @constructor
		 */
		function DistanceWidget(map) {
		  this.set('map', map);
		  this.set('position', map.getCenter());

		  var marker = new google.maps.Marker({
			draggable: true,
			title: 'Move me!'
		  });

		  // Bind the marker map property to the DistanceWidget map property
		  marker.bindTo('map', this);

		  // Bind the marker position property to the DistanceWidget position
		  // property
		  marker.bindTo('position', this);
		  
			// Create a new radius widget
			var radiusWidget = new RadiusWidget();

			// Bind the radiusWidget map to the DistanceWidget map
			radiusWidget.bindTo('map', this);

			// Bind the radiusWidget center to the DistanceWidget position
			radiusWidget.bindTo('center', this, 'position');
			
			$("#changeRadiusButton").on("click", function()
			{
				radiusWidget.set('radius', radiusWidget.get('radius') - 1000);
			});
		}
		DistanceWidget.prototype = new google.maps.MVCObject();

		DistanceWidget.prototype.position_changed = function() {
		  var posVietNam = new google.maps.LatLng(15.120011, 108.808937);
		  if(this.get('position').equals(posVietNam))
		  {
			alert("you're centered at VietNam");
			this.map.setCenter(posVietNam);
		  }
		};	
	
		/**
		 * A RADIUS WIGET
		 * A radius widget that add a circle to a map and centers on a marker.
		 *
		 * @constructor
		 */
		function RadiusWidget() {
		  var circle = new google.maps.Circle({
			strokeWeight: 2
		  });

		  // Set the distance property value, default to 50km.
		  this.set('distance', 50);

		  // Bind the RadiusWidget bounds property to the circle bounds property.
		  this.bindTo('bounds', circle);
		  
		  // Bind the circle center to the RadiusWidget center property
		  circle.bindTo('center', this);
		  

		  // Bind the circle map to the RadiusWidget map
		  circle.bindTo('map', this);

		  // Bind the circle radius property to the RadiusWidget radius property
		  circle.bindTo('radius', this);
		  this.addSizer_();
		}
		RadiusWidget.prototype = new google.maps.MVCObject();
		/**
		 * Update the radius when the distance has changed.
		 */
		RadiusWidget.prototype.distance_changed = function() {
		  this.set('radius', this.get('distance') * 1000);
		};	
		/**
		 * Add the sizer marker to the map.
		 *
		 * @private
		 */
		RadiusWidget.prototype.addSizer_ = function() {
		  var sizer = new google.maps.Marker({
			draggable: true,
			title: 'Drag me!'
		  });

		  sizer.bindTo('map', this);
		  sizer.bindTo('position', this, 'sizer_position');
		};
		
		/**
		 * Update the center of the circle and position the sizer back on the line.
		 *
		 * Position is bound to the DistanceWidget so this is expected to change when
		 * the position of the distance widget is changed.
		 */
		RadiusWidget.prototype.center_changed = function() {
		  var bounds = this.get('bounds');

		  // Bounds might not always be set so check that it exists first.
		  if (bounds) {
			var lng = bounds.getNorthEast().lng();

			// Put the sizer at center, right on the circle.
			var position = new google.maps.LatLng(this.get('center').lat(), lng);
			this.set('sizer_position', position);
		  }
		  
		  var pos = new google.maps.LatLng(15.120011, 108.808937);
			if(this.get('center') != null)
			{
				if(this.get('center').equals(pos))
				{
					this.set('sizer_position',  new google.maps.LatLng(15.120011, 110.808937));
				}
			}
		};
	
		function init() {
			var mapDiv = document.getElementById('map-canvas');
			var map = new google.maps.Map(mapDiv, {
			  center: new google.maps.LatLng(37.790234970864, -122.39031314844),
			  zoom: 8,
			  mapTypeId: google.maps.MapTypeId.ROADMAP
			});
			var distanceWidget = new DistanceWidget(map);
			
			$("#gotoVNButton").on("click", function()
			{
				distanceWidget.set('position', new google.maps.LatLng(15.120011, 108.808937));
			});
		  }
		google.maps.event.addDomListener(window, 'load', init);
    </script>
  </head>
  <body>
    <form>
	<div id="map-canvas"></div>
	<input type="button" name="changeRadius" id = "changeRadiusButton" value="Change Radius">
	<input type="button" name="gotoVNButton" id = "gotoVNButton" value="Go to VietNam">
	</form>
  </body>
</html>